<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>充值</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
          <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<style type="text/css">
	*,h3{margin:0;padding:0;}
	
	.clearfix{
		overflow:hidden;
	}
	.lt{
		float:left;
	}
	.rt{
		float:right;
	}
	.wraper{
		width:500px;
		margin:0 auto;
		padding:20px;
	}
	.radius{
		width:15px;
		height:15px;
		line-height:14px;
		border-radius:50%;
		border:1px solid #ccc;
		display:inline-block;
		margin-right:10px;
	}
	.titles{
		
		font-size:16px;
		padding:10px 0;
	}
	.time{
		margin:10px 0;
	}
	.time1 input{
		border:1px solid #ccc;
		border-radius:4px;
		width:90px;
		*+width:80px;
		height:30px;
		*+height:16px;
		padding:10px;
		text-align:center;
	}
	.time1 span{
		display:inline-block;
		width:10px;
		*+width:16px;
		*+height:28px;
		text-align:center;
		font-size:14px;
	}
	label{
		margin:0;
		font-weight:500;
	}
	.time1 .zhi{
		width:30px;
	}
	.true{
		background:#2e8ded;
		width:80px;
		margin-right:10px;
	}
	.false{
		background:#f9f9f9;
		color:#666 !important;
		width:80px;
		border-color:#d5d5d5 !important;
	}
	.time .red{
		background:red;
		
	}
	.titles input{
		 filter:alpha(opacity=0);  
		 opacity: 0;   
	}
	</style>
<body>
<div class="wraper">
	<div class="time">
		<div class="titles" id="time1" onclick="change(this)">
			<span class="radius"><input type="checkbox" id="tim1"/></span>
			<label for="tim1">投放时间1</label>
		</div>
		<div class="time1">
			<input type="number" id="time1_1"/><span>:</span><input type="number" id="time1_2"/><span class="zhi">至</span>
			<input type="number" id="time1_3"/><span>:</span><input type="number" id="time1_4"/>
		</div>
	</div>
	<div class="time">
		<div class="titles" id="time2"  onclick="change(this)" >
			<span class="radius"><input type="checkbox" id="tim2"/></span>
			<label for="tim2">投放时间2</label>
		</div>
		<div class="time1">
			<input type="number" id="time2_1"/><span>:</span><input type="number" id="time2_2"/><span class="zhi">至</span>
			<input type="number" id="time2_3"/><span>:</span><input type="number" id="time2_4"/>
		</div>
	</div>
	<div class="time">
		<div class="titles" id="time3">
			<span class="radius a"><input type="checkbox"  id="tim3"/></span><label for="tim3">默认全天候</label>
		</div>
	</div>
	<div style="color:#ccc;">*最多可选择两个投放时间段哦~</div>
</div>	 
<script type="text/javascript">


//按钮之间的切换
var tim1= $("#time1").find("input[type=checkbox]")[0];
var tim2= $("#time2").find("input[type=checkbox]")[0];
var tim3= $("#time3").find("input[type=checkbox]")[0];

 function change(thisbtn){
	var btn=thisbtn;
	var tim=$(btn).find(".radius");
	if(tim.hasClass("red")){
		$(btn).find(".radius").removeClass("red");
		$(btn).find("input[type=checkbox]")[0].checked=false;
		
	}else{
		$(btn).find(".radius").addClass("red");
		$(btn).find("input[type=checkbox]")[0].checked=true;
		del();
		tim3.checked=false;
		tim3.removeAttribute("checked");
	}
};
  function del(){
	  $("#time3").find(".radius").removeClass("red");
  }
  $("#time3").click(function(){
	  if($("#time3").find(".radius").hasClass("red")){
		  $("#time3").find(".radius").removeClass("red");
		  tim3.checked=false;
	  }else{
		  $("#time3").parent().siblings().find(".radius").removeClass("red");
		  $("#time3").find(".radius").addClass("red");
		  tim1.checked=false;
		  tim2.checked=false;
		  tim3.checked=true;
		  $(".time1 input").val("");
	  }
  });
  //点击确定时获取被选中的值
  function getTime(){
	  if(tim3.checked){
		parent.$("#isAllday").val('1');
		parent.$("#period").val('默认全天候');
	  }else{
			var time11 = $("#time1_1").val();
			var time12 = $("#time1_2").val();
			var time13 = $("#time1_3").val();
			var time14 = $("#time1_4").val();
			var time21 = $("#time2_1").val();
			var time22 = $("#time2_2").val();
			var time23 = $("#time2_3").val();
			var time24 = $("#time2_4").val();
		  	var period = "";
			if(tim1.checked&&tim2.checked){
				if(time11==''||time12==''||time13==''||time14==''||time21==''||time22==''||time23==''||time24==''){
					alert('请填写完整的发放时间');
					return false;
				}
				period = time11+":"+time12+"-"+time13+":"+time14+"和"+time21+":"+time22+"-"+time23+":"+time24;
			}else if(tim1.checked){
				if(time11==''||time12==''||time13==''||time14==''){
					alert('请填写完整的发放时间');
					return false;
				}
				period = time11+":"+time12+"-"+time13+":"+time14;
			}else if(tim2.checked){
				if(time21==''||time22==''||time23==''||time24==''){
					alert('请填写完整的发放时间');
					return false;
				}
				period = time21+":"+time22+"-"+time23+":"+time24;
			}else{
				alert('请填写发放时间');
				return false;
			}
			parent.$("#isAllday").val('0');
			parent.$("#period").val(period);
	  }
      parent.layer.closeAll();
  }
</script>
</body>
</html>
